<template>
  <div class="box">
    <p>财务报表</p>
    <hr />
    <!-- 搜索框 -->
    <div class="serch-box">
      <!-- 商户 -->
      <DropDownOptions
        :options="selectdownAccountList"
        :placeholder="selectdownAccount"
        @blur="selectdownAccountFuc"
      />
      <SelectTime @blur="serchTime" />
      <el-button type="primary" icon="el-icon-search" @click="search" disabled
        >搜索</el-button
      >
      <el-button type="primary" icon="el-icon-printer" @click="exportData"
        >导出</el-button
      >
    </div>

    <div class="table">
      <TableHeader :headerData="headerData" />
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column
          show-overflow-tooltip
          v-for="item in tableLabel"
          align="center"
          :key="item.prop"
          :label="item.label"
          :sortable="item.prop == 'name' || item.prop == 'date' ? true : false"
          :default-sort="{ prop: 'name', order: 'ascending' }"
        >
          <template slot-scope="scope">
            <el-tag v-if="item.prop != 'name'" type="info" color="transparent"
              >{{ scope.row[item.prop] }}元</el-tag
            >
            <span v-else style="margin-left: 10px">{{
              scope.row[item.prop]
            }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 页码 -->
    <el-pagination
      layout="total, sizes, prev, pager, next, jumper"
      :total="config.total"
      :current-page.sync="config.page"
      @size-change="handleSizeChange"
      @current-change="changePage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="config.limit"
    >
    </el-pagination>
  </div>
</template>

<script>
import { export2Excel } from "../../common/js/util";
import TableHeader from "../../components/MerchantManagement/BusinessListings/TableHeader.vue";
import DropDownOptions from "../../components/MerchantManagement/BusinessListings/DropDownOptions.vue";
import SelectTime from "../../components/MerchantManagement/BusinessListings/SelectTime.vue";
export default {
  data() {
    return {
      headerData: [
        {
          name: "商户总余额",
          MerchantAmount:'',
        },
        {
          name: "总充值金额",
        },
        {
          name: "总冻结金额",
        },
        {
          name: "代付总笔数",
        },
        {
          name: "代付总金额",
        },
        {
          name: "代付总手续费",
        },
      ],
      tableLabel: [
        {
          prop: "merchant_name",
          label: "商户名称",
        },
        {
          prop: "merchant_total_balance",
          label: "商户余额",
        },
        {
          prop: "shmc",
          label: "充值手续费",
        },
        {
          prop: "order_freeze",
          label: "商户冻结余额",
        },
        {
          prop: "zje",
          label: "代付笔数",
        },
        {
          prop: "alternations_amount",
          label: "代付金额",
        },
        {
          prop: "dddjje",
          label: "代付手续费",
        },
        {
          prop: "zhzt",
          label: "代付总盈利",
        },
      ],
      tableData: [
        {
          date: "2016-05-03",
          name: "001",
          address: "上海市普陀区金沙江路 1518 弄",
          zxzt: "2",
        },
        {
          date: "2016-05-02",
          name: "002",
          address: "上海市普陀区金沙江路 1518 弄",
          zxzt: "1",
        },
        {
          date: "2016-05-04",
          name: "003",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "004",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-08",
          name: "005",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-06",
          name: "006",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-07",
          name: "007",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      config: {
        page: 1,
        limit: 10,
        total: 1000,
      },
      selectdownAccount: "商户",
      selectdownAccountList: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
      searchbox: {
        AllMerchants: "",
        serchTime: "",
      },
    };
  },
  mounted() {
    this.gitTable();
  },
  methods: {
    //请求数据
    gitTable() {
      this.$axios({
        url: "/queryFinancialStatements",
        method: "GET",
        params: this.config,
      })
        .then((res) => {
          this.tableData = [...res.data.data];
          console.log("入金请求列表数据", res);
          this.config.total = res.data.count;
        })
        .catch((err) => {
          console.log(err);
        });
      //表头数据
      this.$axios({
        url: "/financialStatementStatistics",
        method: "GET",
        params: {},
      })
        .then((res) => {
          console.log("表头数据", res.data);
          const head = res.data;
          let db = [];
          for (let key in head) {
            // console.log('对象',key + ":" + head[key]);
            db.push(head[key]);
          }
          for (var i = 0; i < this.headerData.length; i++) {
            this.headerData[i].MerchantAmount = db[i]
          }
          console.log(this.headerData);
        })
        .catch((err) => {
          console.log(err);
        });

      //商户下拉
      this.$axios({
        url: "/system/admin/mm/depositrecord/selectrjjlSh",
        method: "GET",
        params: {},
      })
        .then((res) => {
          let Data = [...res.data.data];
          this.selectdownAccountList = this.drownList(Data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //请求数据
    search() {
      this.$axios({
        url: "",
        method: "GET",
        params: {
          merchant_name: this.searchbox.Account,
          type: this.searchbox.State,
          first_time: this.searchbox.serchTime[0],
          last_time: this.searchbox.serchTime[1],
          page: this.config.page,
          limit: this.config.limit,
        },
      })
        .then((res) => {
          this.tableData = [...res.data.data];
          console.log("搜索:", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    serchTime(v) {
      this.searchbox.serchTime = v;
      console.log(this.searchbox);
    },
    selectdownAccountFuc(v) {
      //商户
      this.searchbox.AllMerchants = v;
      console.log(this.searchbox);
    },
    changePage(page) {
      //点击页码
      this.config.page = page;
      console.log(page);
      this.gitTable();
    },
    handleSizeChange(val) {
      //点击每页展示
      console.log(val);
    },
    //下拉列表遍历
    drownList(demo) {
      let drownList = [];
      for (let i = 0; i < demo.length; i++) {
        if (demo[i] !== "null") {
          drownList.push({
            label: "",
            value: "",
          });
          drownList[i].label = demo[i];
          drownList[i].value = i + 1;
        }
      }
      return drownList;
    },
    //导出表单
    exportData() {
      export2Excel(this.tableLabel, this.tableData);
    },
  },
  components: {
    TableHeader,
    DropDownOptions,
    SelectTime,
  },
};
</script>

<style lang="scss" scoped>
.table {
  margin-top: 20px;
}
.box {
  padding: 15px;
  background-color: rgb(255, 255, 255);
}
.serch-box {
  width: 100%;
  height: 100%;
  display: flex;
}
.block,
.el-select {
  padding-right: 10px;
}
</style>